import 'package:flutter/material.dart';
import 'package:provider/provider.dart';

import '../providers/theme_provider.dart';
import '../theme/app_theme.dart';

class ThemeSettingsScreen extends StatelessWidget {
  const ThemeSettingsScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);
    final theme = Theme.of(context);
    final colorScheme = theme.colorScheme;
    
    return Scaffold(
      appBar: AppBar(
        title: const Text('主题设置'),
        centerTitle: true,
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(20.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              // 主题模式选择卡片
              Card(
                margin: const EdgeInsets.only(bottom: 24),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.brightness_6, color: colorScheme.primary),
                          const SizedBox(width: 12),
                          Text(
                            '主题模式', 
                            style: theme.textTheme.titleMedium?.copyWith(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      _buildThemeModeOption(
                        context: context,
                        title: '跟随系统',
                        subtitle: '根据系统设置自动切换明暗主题',
                        icon: Icons.brightness_auto,
                        value: ThemeMode.system,
                        groupValue: themeProvider.themeMode,
                        onChanged: (value) {
                          if (value != null) {
                            themeProvider.setThemeMode(value);
                          }
                        },
                      ),
                      const Divider(),
                      _buildThemeModeOption(
                        context: context,
                        title: '浅色模式',
                        subtitle: '始终使用浅色主题',
                        icon: Icons.brightness_5,
                        value: ThemeMode.light,
                        groupValue: themeProvider.themeMode,
                        onChanged: (value) {
                          if (value != null) {
                            themeProvider.setThemeMode(value);
                          }
                        },
                      ),
                      const Divider(),
                      _buildThemeModeOption(
                        context: context,
                        title: '深色模式',
                        subtitle: '始终使用深色主题',
                        icon: Icons.brightness_4,
                        value: ThemeMode.dark,
                        groupValue: themeProvider.themeMode,
                        onChanged: (value) {
                          if (value != null) {
                            themeProvider.setThemeMode(value);
                          }
                        },
                      ),
                    ],
                  ),
                ),
              ),
              
              // 主题颜色选择卡片
              Card(
                margin: const EdgeInsets.only(bottom: 24),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.color_lens, color: colorScheme.primary),
                          const SizedBox(width: 12),
                          Text(
                            '主题颜色', 
                            style: theme.textTheme.titleMedium?.copyWith(
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 16),
                      Text(
                        '选择一个主题色来个性化您的应用界面',
                        style: theme.textTheme.bodyMedium?.copyWith(
                          color: theme.brightness == Brightness.light 
                              ? Colors.grey.shade600 
                              : Colors.grey.shade400,
                        ),
                      ),
                      const SizedBox(height: 20),
                      GridView.builder(
                        shrinkWrap: true,
                        physics: const NeverScrollableScrollPhysics(),
                        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                          crossAxisCount: 6, // 增加每行显示数量，减小单个图标大小
                          crossAxisSpacing: 8, // 减小间距
                          mainAxisSpacing: 8, // 减小间距
                          childAspectRatio: 1.0,
                        ),
                        itemCount: AppTheme.colorSeeds.length,
                        itemBuilder: (context, index) {
                          final color = AppTheme.colorSeeds[index];
                          final isSelected = themeProvider.colorSeed == index;
                          
                          return GestureDetector(
                            onTap: () {
                              themeProvider.setColorSeed(index);
                            },
                            child: AnimatedContainer(
                              duration: const Duration(milliseconds: 300),
                              decoration: BoxDecoration(
                                color: color,
                                shape: BoxShape.circle,
                                border: Border.all(
                                  color: isSelected 
                                      ? theme.brightness == Brightness.light 
                                          ? Colors.white 
                                          : Colors.white70
                                      : Colors.transparent,
                                  width: 2, // 减小边框宽度
                                ),
                                boxShadow: isSelected
                                    ? [
                                        BoxShadow(
                                          color: color.withOpacity(0.6),
                                          blurRadius: 4, // 减小阴影
                                          spreadRadius: 1, // 减小阴影扩散
                                        ),
                                      ]
                                    : null,
                              ),
                              child: isSelected 
                                  ? const Icon(Icons.check, color: Colors.white, size: 16) // 减小图标大小
                                  : null,
                            ),
                          );
                        },
                      ),
                    ],
                  ),
                ),
              ),
              
              // 预览卡片
              Card(
                margin: const EdgeInsets.only(bottom: 24),
                child: Padding(
                  padding: const EdgeInsets.all(16.0),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          Icon(Icons.preview, color: colorScheme.primary),
                          const SizedBox(width: 12),
                          Text(
                            '主题预览', 
                            style: theme.textTheme.titleMedium?.copyWith(
                              fontWeight: FontWeight.bold,
                              fontFamily: 'FangSong',
                              fontFamilyFallback: ['仿宋', 'FangSong', 'FangSong_GB2312'],
                            ),
                          ),
                        ],
                      ),
                      const SizedBox(height: 20),
                      // 预览元素
                      Container(
                        padding: const EdgeInsets.all(16),
                        decoration: BoxDecoration(
                          color: theme.brightness == Brightness.light 
                              ? Colors.grey.shade100 
                              : Colors.grey.shade800,
                          borderRadius: BorderRadius.circular(12),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text('按钮样式', style: theme.textTheme.titleSmall?.copyWith(fontFamily: 'FangSong', fontFamilyFallback: ['仿宋', 'FangSong', 'FangSong_GB2312'])),
                            const SizedBox(height: 12),
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                              children: [
                                ElevatedButton(
                                  onPressed: () {}, 
                                  child: Text('主按钮', style: TextStyle(fontFamily: 'FangSong', fontFamilyFallback: ['仿宋', 'FangSong', 'FangSong_GB2312']))
                                ),
                                TextButton(
                                  onPressed: () {}, 
                                  child: Text('文本按钮', style: TextStyle(fontFamily: 'FangSong', fontFamilyFallback: ['仿宋', 'FangSong', 'FangSong_GB2312']))
                                ),
                              ],
                            ),
                            const SizedBox(height: 20),
                            Text('文本样式', style: theme.textTheme.titleSmall?.copyWith(fontFamily: 'FangSong', fontFamilyFallback: ['仿宋', 'FangSong', 'FangSong_GB2312'])),
                            const SizedBox(height: 12),
                            Text('标题文本', style: theme.textTheme.titleMedium?.copyWith(fontFamily: 'FangSong', fontFamilyFallback: ['仿宋', 'FangSong', 'FangSong_GB2312'])),
                            Text('正文内容', style: theme.textTheme.bodyMedium?.copyWith(fontFamily: 'FangSong', fontFamilyFallback: ['仿宋', 'FangSong', 'FangSong_GB2312'])),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
  
  Widget _buildThemeModeOption({
    required BuildContext context,
    required String title,
    required String subtitle,
    required IconData icon,
    required ThemeMode value,
    required ThemeMode groupValue,
    required ValueChanged<ThemeMode?> onChanged,
  }) {
    final theme = Theme.of(context);
    final isSelected = value == groupValue;
    
    return InkWell(
      onTap: () => onChanged(value),
      borderRadius: BorderRadius.circular(12),
      child: Padding(
        padding: const EdgeInsets.symmetric(vertical: 12.0),
        child: Row(
          children: [
            Icon(icon, 
              color: isSelected ? theme.colorScheme.primary : null,
              size: 24,
            ),
            const SizedBox(width: 16),
            Expanded(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text(
                    title,
                    style: theme.textTheme.titleSmall?.copyWith(
                      fontWeight: isSelected ? FontWeight.bold : FontWeight.normal,
                      color: isSelected ? theme.colorScheme.primary : null,
                    ),
                  ),
                  const SizedBox(height: 4),
                  Text(
                    subtitle,
                    style: theme.textTheme.bodySmall?.copyWith(
                      color: theme.brightness == Brightness.light 
                          ? Colors.grey.shade600 
                          : Colors.grey.shade400,
                    ),
                  ),
                ],
              ),
            ),
            Radio<ThemeMode>(
              value: value,
              groupValue: groupValue,
              onChanged: onChanged,
              activeColor: theme.colorScheme.primary,
            ),
          ],
        ),
      ),
    );
  }
}